<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>我的成就</title>
</head>
<body class="whiteBg">
<i class="icon iconfont icon-iconfontjiantou1 dingwei"></i>
<div class="achievementBox">
    <div class="achievementTop">
        <img class="beijing" src="images/chengjiu8.jpg" />
        <div class="achievementTopBox">
            <div class="fen"><span>56</span><font style="font-size:0.62rem;">分</font></div>
            <div class="jianjie_box">
                <div class="clearfix">
                    <div class="name1 fl">小土狗</div>
                    <div class="name2 fr">我的排名:&nbsp<font style="color:#d54129;">5689</font></div>
                </div>
                <ul class="jianjieTab flex">
                    <li class="flex-1">我的评分</li>
                    <li class="flex-1">成就排名</li>
                </ul>
                <div class="clearfix">
                    <div class="chengjiu_zi3 fl">0</div>
                    <div class="chengjiu_zi4 fl">30</div>
                    <div class="chengjiu_zi5 fl">60</div>
                    <div class="chengjiu_zi5 fl">90</div>
                </div>
                <ul class="jianjieLine clearfix">
                    <li class="green">
                        <div class="nengliang fl"></div>
                        <div class="nengliang_xian fl"></div>
                    </li>
                    <li>
                        <div class="nengliang2 fl"></div>
                        <div class="nengliang_xian2 fl"></div>
                    </li>
                    <li>
                        <div class="nengliang2 fl"></div>
                        <div class="nengliang_xian2 fl"></div>
                    </li>
                    <li>
                        <div class="nengliang2 fl"></div>
                    </li>
                </ul>
                <ul class="chenghao flex">
                    <li class="flex-1 "><img class="chenghaoImg" src="images/chengjiu1.png" /></li>
                    <li  class="chengjiuJiange flex-1 tuoming"><img class="chenghaoImg" src="images/chengjiu2.png"style="margin-left:0.4rem;" /></li>
                    <li  class="flex-1 tuoming"><img class="chenghaoImg" src="images/chengjiu3.png" style="margin-left:0.4rem" /></li>
                    <li  class="flex-1 tuoming"><img class="chenghaoImg" src="images/chengjiu4.png" style="margin-left:0.4rem" /></li>
                </ul>
                <ul class="chenghao flex">
                    <li class="flex-1 chengjiuColor ">环保新手</li>
                    <li class="flex-1 tuoming chengjiuLi "style="margin-left:1.3rem;">环保卫士</li>
                    <li class="flex-1 tuoming chengjiuLi  "style="margin-left:1.3rem">环保达人</li>
                    <li class="flex-1 tuoming chengjiuLi ">环保大使</li>
                </ul>
            </div>
        </div>
    </div>
    <!--成就列表-->
    <ul class="achievementTotal">
        <li>
            <img class="kehuishou_img " src="images/chengjiu5.png" />
            <div class="jiuzhong_box ">
                <h4>可回收垃圾累计兑换总量</h4>
                <p><span class="greenFont fontGreen">88964.65&nbsp</span>Kg</p>
            </div>
        </li>
        <li>
            <div class="jiuzhong_box">
                <img class="chuyu_img " src="images/chengjiu6.png" />
                <h4>厨余垃圾累计兑换总量</h4>
                <p><span class="blueFont fontBlue">88964.65&nbsp</span>Kg</p>
            </div>
        </li>
        <li>
            <div class="jiuzhong_box">
                <img class="youhai_img" src="images/chengjiu7.png" />
                <h4>有害垃圾累计兑换总量</h4>
                <p><span class="yellowFont">88964.65&nbsp</span>Kg</p>
            </div>
        </li>
    </ul>
    <!--我的评分列表-->
    <div class="achievementList body_box">
        <ul class="tabBtn clearfix">
            <li class="act">回收评分</li>
            <li>兑换评分</li>
            <li>综合评分</li>
        </ul>

        <div id="tabs-container" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <!--回收评分-->
                    <ul class="tabList">
                        <li>
                            <p>废纸类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换10次</span>
                                    <span class="greenFont">+3评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>塑料类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换10次</span>
                                    <span class="greenFont">+3评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>玻璃类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>织物类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+3评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>金属类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+3评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="greenFont ml-10">已完成</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>电器类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+3评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>利乐包</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span >进度</span>
                                    <span class="greenFont ml-10">已完成</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>有害类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <!--兑换评分-->
                    <ul class="tabList">
                        <li>
                            <p>蔬菜类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换10次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>粮油类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>日用品类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换5次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>服务类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换1次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <!--综合评分-->
                    <ul class="tabList">
                        <li>
                            <p>绿积分</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换数量≥300</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>蓝积分</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">兑换数量≥2000</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>可回收</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">垃圾总量≥500kg</span>
                                    <span class="greenFont">+8评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>厨余回收</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">连续签到≥10天</span>
                                    <span class="greenFont">+3评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>厨余回收</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">累计签到100天</span>
                                    <span class="greenFont">+10评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="greenFont ml-10">已完成</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>厨余回收</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">投放总量≥100kg</span>
                                    <span class="greenFont">+7评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>线上类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">登录个人中心10次</span>
                                    <span class="greenFont">+2评分</span>
                                </div>
                                <div class="fr">
                                    <span >进度</span>
                                    <span class="greenFont ml-10">已完成</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p>线上类</p>
                            <div class="clearfix">
                                <div class="fl">
                                    <span class="grayFont w-5">蓝积分提现1次</span>
                                    <span class="greenFont">+5评分</span>
                                </div>
                                <div class="fr">
                                    <span>进度</span>
                                    <span class="redFont">6</span>
                                    <span>/</span>
                                    <span>10</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--我的排名列表-->
    <div class="achievementList body_box">
        <h4 class="title">荣誉榜<span>TOP50</span></h4>
        <div class="tableBox">
            <table width="100%">
                <tr>
                    <td width="8%">1</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">2</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">3</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">4</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">5</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">6</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">7</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="5%">8</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">9</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
                <tr>
                    <td width="8%">10</td>
                    <td width="12%"><img src="images/paim.png"></td>
                    <td width="20%">小土狗</td>
                    <td width="40%">投放<span class="greenFont">123456</span>Kg</td>
                    <td width="20%">评分<span class="redFont">100</span></td>
                </tr>
            </table>
            <div class="more">查看更多</div>
        </div>
    </div>
</div>
<script src="js/swiper.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script>
    //列表切换
    window.onload = function() {
        var tabsSwiper = new Swiper('#tabs-container', {
            speed: 500,
            observeParents:true,
            observer:true,
            on: {
                slideChangeTransitionStart: function() {
                    $(".tabBtn .act").removeClass('act');
                    $(".tabBtn li").eq(this.activeIndex).addClass('act');
                }
            }
        });
        $(".tabBtn").on('click', 'li', function(e) {
            e.preventDefault();
            $(".tabBtn .act").removeClass('act');
            $(this).addClass('act');
            tabsSwiper.slideTo($(this).index())
        });


    };
    $(function(){
        //判断显示页面
        var index = getUrlParam('dataId');
        if(index == 2){
            $(".achievementTotal").hide();
            $(".jianjieTab li").eq(1).addClass("act");
            $(".achievementList").eq(1).css("display","block")
        }
        //评分，排名切换
        $(".jianjieTab").on("click","li",function(){
            $(".achievementTotal").hide();
            $(this).addClass('act').siblings().removeClass('act');
            var num = $(this).index();
            $(".achievementList").eq(num).fadeIn().siblings(".achievementList").fadeOut();
        });
    });
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }






</script>
</body>
</html>
